<template>
  <div class="app-container">
    <el-form ref="form" inline :model="form" class="form-options" label-width="100px">
      <el-form-item label="器材分类">
        <el-autocomplete
          ref="parentNameRef"
          v-model="form.parentName"
          :fetch-suggestions="querySearchEquipmentName"
          clearable
          :trigger-on-focus="false"
          @select="handleSelectEquipmentName"
          @clear="clickClearparentNameRef"/>
      </el-form-item>

      <el-form-item label="器材名称">
        <el-autocomplete
          ref="equipmentTypeNameRef"
          v-model="form.equipmentTypeName"
          :fetch-suggestions="querySearchEquipmentName"
          clearable
          :trigger-on-focus="false"
          @select="handleSelectEquipmentName"
          @clear="clickClearequipmentTypeNameRef"/>
      </el-form-item>

      <el-form-item label="仓库名称">
        <el-autocomplete
          ref="warehouseNameRef"
          v-model="form.warehouseName"
          :fetch-suggestions="querySearchEquipmentName"
          clearable
          :trigger-on-focus="false"
          @select="handleSelectEquipmentName"
          @clear="clickClearwarehouseNameRef"/>
      </el-form-item>

      <el-form-item label="消息接收人">
        <el-autocomplete
          ref="receiverRef"
          v-model="form.receiver"
          :fetch-suggestions="querySearchEquipmentName"
          clearable
          :trigger-on-focus="false"
          @select="handleSelectEquipmentName"
          @clear="clickClearreceiverRef"/>
      </el-form-item>

      <el-form-item label="消息类型">
        <el-select v-model="form.type" clearable filterable>
          <el-option
            v-for="item in types"
            :key="item.valueId"
            :label="item.valueName"
            :value="item.valueId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="提醒日期" class="long-content">
        <el-date-picker
          v-model="form.date"
          type="daterange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </el-form-item>

      <div class="btns">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      header-cell-class-name="table-header"
      style="width: 100%;margin-top: 20px">
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="createTime"
        width="150"
        label="消息时间">
      </el-table-column>
      <el-table-column
        prop="typeName"
        width="120"
        label="消息类型">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="content"
        label="消息内容">
      </el-table-column>
      <el-table-column
        prop="receiver"
        width="120"
        label="消息接收人">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="parentName"
        label="器材分类">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="equipmentTypeName"
        label="器材名称">
      </el-table-column>
      <el-table-column
        label="状态"
        width="90">
        <template slot-scope='scope'>
          <el-button
            type="text"
            v-if="scope.row.status == 0"
            style="color: #3a8ee6"
            @click="updateMessageStatus(scope.row)">知道了
          </el-button>
          <span v-else>已读</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: right;margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getTypes } from '@/api/common'
import { getMessageList, updateMessageStatus } from '@/api/log'

export default {
  name: 'HistoricalNews',
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      form: {
        parentName: '',
        equipmentTypeName: '',
        warehouseName: '',
        receiver: '',
        date: '',
        type: '',
        typeName: ''
      },
      tableData: [],
      types: []
    }
  },
  mounted() {
    getTypes({ typeId: 'stock_type' }).then(res => {
      this.types = res.resultData
    })
    this.onQuery()
  },
  activated() {
    this.onQuery()
  },
  methods: {
    handleSizeChange: function(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },
    getTableData() {
      const param = {
        page: this.currentPage,
        rows: this.pageSize,
        beginTime: this.form.date ? (this.form.date[0] || '') : '',
        endTime: this.form.date ? (this.form.date[1] || '') : ''
      }
      Object.assign(param, this.form)
      getMessageList(param).then(res => {
        this.tableData = res.resultData
        this.total = res.total
      })
    },
    /**
     * 模糊查询标签
     * @param queryString
     * @param cb
     */
    querySearchLabel: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      cb(results)
    },
    /**
     * 选择标签
     * @param item
     */
    handleSelectLabel(item) {
      // console.log(item)
    },
    /**
     * 模糊查询批次号
     * @param queryString
     * @param cb
     */
    querySearchBatch: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      cb(results)
    },
    /**
     * 选择批次号
     * @param item
     */
    handleSelectBatch(item) {
      // console.log(item)
    },
    /**
     * 模糊查询器材名称
     * @param queryString
     * @param cb
     */
    querySearchEquipmentName: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      cb(results)
    },
    /**
     * 选择器材名称
     * @param item
     */
    handleSelectEquipmentName(item) {
      // console.log(item)
    },

    clickClearparentNameRef(){
      this.$nextTick(() => {
        if (this.$refs.parentNameRef) {
          this.$refs.parentNameRef.activated = true;
        }
      });
    },
    clickClearequipmentTypeNameRef(){
      this.$nextTick(() => {
        if (this.$refs.equipmentTypeNameRef) {
          this.$refs.equipmentTypeNameRef.activated = true;
        }
      });
    },
    clickClearwarehouseNameRef(){
      this.$nextTick(() => {
        if (this.$refs.warehouseNameRef) {
          this.$refs.warehouseNameRef.activated = true;
        }
      });
    },
    clickClearreceiverRef(){
      this.$nextTick(() => {
        if (this.$refs.receiverRef) {
          this.$refs.receiverRef.activated = true;
        }
      });
    },
    /**
     * 模糊查询仓库名称
     * @param queryString
     * @param cb
     */
    querySearchHouseName: function(queryString, cb) {
      // 调用 callback 返回建议列表的数据
      const results = []
      cb(results)
    },
    /**
     * 选择仓库名称
     * @param item
     */
    handleSelectHouseName(item) {
      // console.log(item)
    },
    onQuery() {
      this.currentPage = 1
      this.getTableData()
    },
    updateMessageStatus(row) {
      updateMessageStatus({ id: row.id }).then(res => {
        this.getTableData()
      })
    },
    onReset() {
      this.form = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>

